<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="12">
            <a-form-item label="订单编号">
              <el-input placeholder="请输入订单编号" v-model="queryParam.orderSn" style="width: 100%"></el-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="12">
            <a-form-item label="面料编号">
              <el-input placeholder="请输入面料编号" v-model="queryParam.storeCode" style="width: 100%"></el-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="12">
            <a-form-item label="客户名称">
              <el-input placeholder="请输入客户名称" v-model="queryParam.gysName" style="width: 100%"></el-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="12">
            <a-form-item label="创建时间">
              <el-date-picker
                type="daterange"
                range-separator="~"
                start-placeholder="开始"
                end-placeholder="结束"
                placeholder="选择日期"
                @blur="formatD(form.date)"
                v-model="form.date"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </a-form-item>
            <!--            <j-date placeholder="开始日期" v-model="queryParam.date" style="width: 100%"></j-date>-->
          </a-col>

          <a-col :md="6" :sm="12">
            <a-form-item label="订单状态">
              <el-select placeholder="请选择订单状态" style="width: 100%" v-model="queryParam.status">
                <el-option label="全部订单" value="">
                  全部订单
                </el-option>
                <el-option label="未支付" value="0"></el-option>
                <el-option label="已支付" value="1"></el-option>
                <el-option label="已接单" value="3"></el-option>
                <el-option label="已发货" value="4"></el-option>
                <el-option label="已完成" value="5"></el-option>
                <el-option label="售后" value="6"></el-option>

                <el-option label="已驳回" value="9"></el-option>
                <el-option label="备库" value="10"></el-option>
                <el-option label="售后完成" value="11"></el-option>
              </el-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="12">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="form.date = '';searchReset()" icon="reload"
                          style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

          <!--          <a-col :md="4" :sm="12">
                      <j-date placeholder="结束日期" v-model="queryParam.enddate" style="width: 100%"></j-date>
                    </a-col>-->
        </a-row>

      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!--table区域-begin-->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="30px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a-menu-item>
            <a @click="gotoDetail(record.orderSn)">查看详情</a>
            <!--                  <a-popconfirm style="margin-left: 8px" v-show="record.status=='1' || record.status=='10'"
                                            title="确定接单吗?"
                                            @confirm="() => openBuyWindow(record.orderSn)">
                                <a style="color:deepskyblue">立即接单</a>
                              </a-popconfirm>-->
            <a style="margin-left: 8px" @click="openBuyWindow(record.orderSn)"
               v-show="record.status=='1' || record.status=='10'">立即接单</a>
            <!--<a style="margin-left: 8px;" @click="seepaidanSupplierList(record)" v-if="record.status=='1'">派单</a>-->
            <a style="margin-left: 8px;" @click="getorderSn(record.orderSn)"
               v-if="record.status=='0'">调价</a>
            <a style="margin-left: 8px;" @click="fahuo(record.orderSn)" v-if="record.status=='3'">立即发货</a>
            <a style="margin-left: 8px;" @click="fahuo(record.orderSn)" v-if="record.status=='4'">重新发货</a>
            <a-popconfirm style="margin-left: 8px" v-if="record.status=='4'" title="确定完成吗?"
                          @confirm="() => finishOrderFunc(record.orderSn)">
                    <a style="color:deepskyblue">完成订单</a>
            </a-popconfirm>
            <a-popconfirm style="margin-left: 8px" v-if="record.status=='1'" title="确定备库吗?"
                          @confirm="() => beikuWin(record.orderSn)">
                    <a style="color:deepskyblue">备库</a>
            </a-popconfirm>
          </a-menu-item>
        </span>

      </a-table>
    </div>

    <!--<lgyxCreditRate-modal ref="modalForm" @ok="modalFormOk"></lgyxCreditRate-modal>-->

    <!--备库的弹框-->
    <a-modal
      title="订单备库"
      v-model:visible="visible1"
      @ok="beikuFunc"
    >
      备注信息：
      <a-input v-model="beikuRemark"/>
    </a-modal>

    <!--接单的弹框-->
    <a-modal
      title="立即接单"
      v-model:visible="visible0"
      @ok="orderNow"
    >
      备注：
      <a-input v-model="jieRemark"/>
    </a-modal>

    <!--订单调价-->
    <a-modal
      title="订单调价"
      v-model:visible="visible"
      @ok="changPriceFunc"
    >
      <a-form>
        <a-form-item>
          <label>
            调价金额：
            <a-input-number min="0.01" style="width: 30%" v-model="changePrice"/>
          </label>
        </a-form-item>

        <a-form-item>
          <label>
            备注信息：
            <a-input type="textarea" v-model="tiaojiaRemark"/>
          </label>
        </a-form-item>
      </a-form>
    </a-modal>

    <!--立即发货-->
    <a-modal
      title="订单发货"
      v-model:visible="visible2"
      @ok="fahuoNow"
    >
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="发货方式">
          <a-select
            v-model:value="courierid"
            placeholder=""
          >
            <a-select-option :label="item.courierName" :value="item.id" v-for="(item,key) in getKuaidiList"
                             :key="item.id">
              {{ item.courierName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="物流信息">
          <a-input v-model="yunNumber"/>
        </a-form-item>

        <a-form-item label="备注信息">
          <a-input v-model="fahuoRemark"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <!--弹框结束-->
    <paidanSupplierList ref="seepaidanSupplierList"></paidanSupplierList>
  </a-card>
</template>

<script>
import paidanSupplierList from './modules/paidanSupplierList';
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate.vue'
import {getAction} from "../../api/manage";

export default {
  name: 'FabricOrder',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDate,
    paidanSupplierList
  },
  data() {
    return {
      form: {
        date: ''
      },
      beikuOrderSn: '', // 备库的订单编号
      beikuRemark: '', // 备库的备注
      visible1: false, // 备库的弹框是否显示
      tiaojiaRemark: '', // 调价备注
      fahuoRemark: '', // 发货的备注
      courierid: '', // 发货选中的快递id
      getKuaidiList: [], // 快递列表
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      visible0: false, // 立即接单的弹框是否显示
      jieOrderSn: '', // 接单的订单编号
      jieRemark: '', // 接单的备注
      yunNumber: '', // 立即发货的运单编号
      fahuoOrderSn: '', // 立即发货的订单编号
      wuliuCode: '', //物流单号
      orderSn: '', // 选中的面料订单号
      tiaoorderSn: '',// 选中的调价订单编号
      visible: false, // 调价的显示
      visible2: false, // 发货弹框的显示
      description: '面料订单',
      fabricOrderDetail: [], // 当前的面料订单详情
      orderDetail: {}, // 订单详情
      changePrice: '',//调价金额
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '客户编号',
          align: "center",
          dataIndex: 'companyCode'
        },
        {
          title: '客户名称',
          align: "center",
          dataIndex: 'companyName'
        },
        {
          title: '订单编号',
          align: "center",
          dataIndex: 'orderSn'
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '订单金额',
          align: "center",
          dataIndex: 'orderMoney'
        },
        {
          title: '订单状态',
          align: "center",
          dataIndex: 'status',
          customRender: function (text) {
            if (text == '0') {
              return '未支付'
            } else if (text == '1') {
              return '已支付'
            } else if (text == '2') {
              return '未接单'
            } else if (text == '3') {
              return '已接单'
            } else if (text == '4') {
              return '已发货'
            } else if (text == '5') {
              return '已完成'
            } else if (text == '6') {
              return '申请售后'
            } else if (text == '7') {
              return '售后'
            } else if (text == '8') {
              return '已确认'
            } else if (text == '9') {
              return '已驳回'
            } else if (text == '10') {
              return '备库'
            } else if (text == '11') {
              return '完成售后'
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/orderCenter/getFabricOrder',
        orderNow: '/orderCenter/orderNow', // 立即接单
        theGoods: '/orderCenter/theGoods', // 确认收货
        fabricDetail: '/cart/getFabricOrderDetail', // 面料订单详情
        pricing: '/orderCenter/pricing', // 订单调价
        fahuoNow: '/orderCenter/fahuoNow', // 立即发货
        finishOrder: '/orderCenter/finishOrder', // 完成订单
        beikuOrder: '/orderCenter/beikuOrder', // 备库
        getKuaidi: '/orderCenter/getKuaidi', // 快递列表
      },
      dictOptions: {},
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  created() {
    this.getKuaidiFunc()
  },
  methods: {

    formatD(array) {
      var start = array[0]
      var end = array[1]
      this.queryParam.date = start + "," + end
      // alert(this.queryParam.date)
    },

    /**
     * 打开备库的弹窗
     */
    beikuWin(orderSn) {
      this.beikuOrderSn = orderSn
      this.visible1 = true
    },

    /**
     * 获取快递信息
     */
    getKuaidiFunc() {
      getAction(this.url.getKuaidi).then(res => {
        if (res.code == '0') {
          this.getKuaidiList = res.data
        }
      })
    },

    //查看派单的供应商列表
    seepaidanSupplierList: function (record) {
      this.$refs.seepaidanSupplierList.edit(record, 0);
      this.$refs.seepaidanSupplierList.title = "派单";
      this.$refs.seepaidanSupplierList.disableSubmit = false;
    },
    /**
     * 订单备库
     * @author zxl
     * @param orderSn 订单编号
     */
    beikuFunc() {
      getAction(this.url.beikuOrder, {
        'orderSn': this.beikuOrderSn,
        'orderType': 3,
        'remark': this.beikuRemark
      }).then(res => {
        this.visible1 = false
        if (res.code == '0') {
          this.$message.success("操作成功")
          this.loadData()
        } else {
          this.$message.error("操作失败")
        }
      })
    },

    /**
     * 完成订单
     * @author zxl
     * @param orderSn 订单编号
     */
    finishOrderFunc(orderSn) {
      getAction(this.url.finishOrder, {
        orderSn: orderSn,
        orderType: 3
      }).then(res => {
        if (res.code == '0') {
          this.$message.success("操作成功")
          this.loadData()
        } else {
          this.$message.error("操作失败")
        }
      })
    },

    /**
     * 点击发货，现实发货弹窗，获取当前订单编号
     * @author zxl
     * @param orderSn 订单编号
     */
    fahuo(orderSn) {
      this.visible2 = true
      this.fahuoOrderSn = orderSn
    },

    /**
     * 立即发货
     * @author zxl
     * @param orderSn 订单编号
     */
    fahuoNow() {
      if (this.yunNumber == '') {
        this.$message.error("请输入运单号")
        return;
      } else {
        getAction(this.url.fahuoNow, {
          'orderSn': this.fahuoOrderSn,
          'yunNumber': this.yunNumber,
          'orderType': 3,
          'kuaidiid': this.courierid,
          'remark': this.fahuoRemark
        }).then(res => {
          if (res.code == '0') {
            this.visible2 = false
            this.$message.success("发货成功")
            this.loadData()
          } else {
            this.$message.error("发货失败")
          }
        })
      }
    },

    /**
     * 点击调价获取订单编号
     * @author zxl
     * @param orderSn 订单编号
     */
    getorderSn(orderSn) {
      this.visible = true
      this.tiaoorderSn = orderSn
    },

    /**
     * 订单调价
     * @author zxl
     */
    changPriceFunc() {
      if (this.changePrice == '') {
        this.$message.error("请输入调价金额")
        return;
      } else {
        getAction(this.url.pricing, {
          'orderType': 3,
          'orderSn': this.tiaoorderSn,
          'price': this.changePrice,
          'remark': this.tiaojiaRemark
        }).then(res => {
          if (res.code == '200') {
            this.visible = false
            this.$message.success("调价成功")
            this.loadData()
          } else {
            this.$message.error("调价失败")
          }
        })
      }
    },

    // 前往面料订单详情界面
    gotoDetail(orderSn) {
      this.$router.push({
        path: '/orderCenter/fabricDetail', query: {
          order: orderSn
        }
      })
    },
    theGoods(orderSn) {// 确认收货
      getAction(this.url.theGoods, {'orderSn': orderSn}).then(res => {
        if (res.code == '200') {
          this.$message.success("操作成功")
        } else {
          this.$message.error("操作失败")
        }
        this.loadData()
      })
    },

    //立即接单打开弹框
    openBuyWindow(orderSn) {
      this.jieOrderSn = orderSn
      this.visible0 = true
    },

    // 立即接单
    orderNow() {
      getAction(this.url.orderNow, {'orderSn': this.jieOrderSn, 'remark': this.jieRemark}).then(res => {
        if (res.code == '200') {
          this.$message.success("接单成功")
        } else {
          this.$message.error("接单失败")
        }
        this.visible0 = false
        this.loadData()
      })
    },
    // 判断订单状态
    getStatus(text) {
      if (text == '0') {
        return '未支付'
      } else if (text == '1') {
        return '已支付'
      } else if (text == '2') {
        return '未接单'
      } else if (text == '3') {
        return '已接单'
      } else if (text == '4') {
        return '已发货'
      } else if (text == '5') {
        return '已完成'
      } else if (text == '6') {
        return '申请售后'
      } else if (text == '7') {
        return '售后'
      } else if (text == '8') {
        return '已确认'
      }
    },
    // 判断售后方式
    getAfterType(text) {
      if (text == '0') {
        return '退货'
      } else if (text == '1') {
        return '换货'
      } else if (text == '2') {
        return '返修'
      } else if (text == '3') {
        return '重做'
      }
    },
    initDictConfig() {
    },
    // 下面三个是详情弹框的方法
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer(record) {
      this.orderSn = record.orderSn
      this.orderDetail = record // 订单详情
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.fabricOrderDetail = []
    },
    // 开始查询订单的详情啦~~~
    getOrderDetail() {
      getAction(this.url.fabricDetail, {
        'token': '88411883', // token
        'orderSn': this.orderSn, // 选中的订单编号
      }).then(res => {
        this.fabricOrderDetail = res.data.cartInfoList //面料列表
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.fabricName {
  margin-left: 10px;
  margin-top: 10px;
  width: auto;
  display: block !important;
  background: #2d2d2d;
  color: #ffe56d;
  text-align: center;
  border-radius: 3px;
}

.fabigtitle {
  height: 34px;
  width: 200px;
  text-align: left;
}

.fabigcontent {
  height: 34px;
  width: 200px;
  text-align: right;
}

.fatitle {
  height: 34px;
  width: 82px;
  background: rgb(242 242 242);
  text-align: center;
}

.facontent {
  width: 180px;
  overflow: hidden;
  text-align: center;
}
</style>